<style lang="less" scope>
@import "../assets/css/config.less";
*{
  margin: 0;
  padding: 0;
}
.my-dropdown{
  position: relative;
  text-align: left;
}
.input{
  border: 1px solid #dcdfe6;
  width: 100%;
  height: 28px;
  border-radius: 4px;
  line-height: 28px;
  outline: none;
  padding: 0 10px;
  &:focus{
    border-color: @color2;
  }
}
.dropdown{
  display: none;
  margin-top: 4px;
  position: absolute;
  border:1px solid #e4e7ed;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
  width: 100%;
  padding: 10px 0;
  font-size: 13px;
  cursor: default;
  background-color: @white;
  .item{
    line-height: 28px;
    padding: 0 10px;
    &:hover{
      color: @color1;
      background-color: @hover-bgc;
    }
  }
  &:hover{
    display: block
  }
}
.input:focus+.dropdown{
  display: block
}
</style>

<template>
  <div id="myDropDown">
    <div class="my-dropdown" >
      <input type="text" class="input" v-model="value" @input="handleInput">
      <div class="dropdown">
        <div class="item" v-for="(item, index) in list" :key="index" @click="handleClick(index)">{{item.label}}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'myDropDown',
  data() {
    return {
      value: ''
    }
  },
  props: ['list', 'initData'],
  mounted(){
    this.value = this.initData||this.list[0].label;
  },
  methods: {
    handleClick(index){
      this.value = this.list[index].label
      this.$emit('onClick', this.list[index])
    },
    handleInput(){
      this.$emit('onClick', {value: this.value})
    }
  }
}
</script>